<template>
	<view class="mains">
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="top">
					<image class="image" :src="item.files" mode="" @error="errorImage($event, index)"></image>
					<!-- <view class="tip">
						视频课
					</view> -->
				</view>
				<view class="title">
					{{item.fullname}}
				</view>
				<view class="bottom">
					<view class="price">
						{{item.fee==0?"免费":"¥" + item.fee}}
					</view>
					<view class="nums">
						<image src="../../../static/image/mine.png" mode=""></image>
						<text>{{item.view}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "courseList",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/courseIntroduce/courseIntroduce?id=" + item.id + "&view=" + item.view +
						'&isJoin=' + item.isJoin + "&canSelf=" + item.canSelf
				})
			},
			errorImage(e,index) {
				var _this = this
				if (_this.list.length > 0) {
					_this.list[index].files = require('../../../static/image/Mask.png')
				}
			}
		},
		mounted() {
			console.log(this.list)
		}
	}
</script>

<style lang="scss" scoped>
	.mains {
		.list {
			width: 90%;
			margin: 32rpx auto 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		.item {

			width: 332rpx;
			height: 352rpx;
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			margin-bottom: 32rpx;

			.top {
				position: relative;
				height: 200rpx;

				.image {
					width: 332rpx;
					height: 200rpx;
					border-radius: 12rpx;
				}

				.tip {
					position: absolute;
					left: 0;
					top: 0;
					width: 76rpx;
					height: 32rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 0px 0px 8rpx 0px;
					text-align: center;
					line-height: 32rpx;
					color: #FFFFFF;
					font-size: 20rpx;
				}
			}

			.title {
				width: 100%;
				font-size: 28rpx;
				font-weight: 400;
				color: #0F1826;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin: 14rpx 0;
				height: 80rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-size: 28rpx;
					color: #FF464E;
					font-weight: 500;
				}

				.nums {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #6E7580;
					}
				}
			}
		}
	}
</style>
